/**
 * Created by xiaom on 2016/11/5.
 */
import React, {Component} from 'react';
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import RaisedButton from 'material-ui/RaisedButton';
import axios from 'axios';
import {
  Header,
  shouldUpdate,
  Wrapper
} from '../../components/index';
import {
  Step,
  Stepper,
  StepLabel,
  StepContent,
} from 'material-ui/Stepper';
import {Link} from 'react-router';
import Snackbar from 'material-ui/Snackbar';
import {red500} from 'material-ui/styles/colors';
import Time from 'react-time-format';


export default class NetList extends Component {


  constructor(props) {
    super(props);
    this.state = {
      expanded: false,
      openSnackbar: false,
      message: '',
      net_repair_list: []
    };
  }

  shouldComponentUpdate(nextProps = {}, nextState = {}) {
    return shouldUpdate(this, nextProps, nextState);
  }

  getNetList() {
    const _this = this;
    axios.get('http://localhost/netmaker/backstage/index.php?g=api&m=WeChat&a=getUserRepairList')
      .then(function (response) {
        if (response.data.code == 200) {
          if (!_this.isUnmounted) {
            _this.setState({net_repair_list: response.data.data});
          }
        } else {
          _this.SnackbarChange(response.data.message);
        }
      })
      .catch(function (error) {
        _this.SnackbarChange("网络错误！请稍后再试~");
        return false;
      });
  }

  SnackbarRequestClose = () => {
    this.setState({
      openSnackbar: false
    });
  };

  SnackbarChange = (message) => {
    this.setState({
      openSnackbar: true,
      message: message
    });
  };

  componentDidMount() {
    const _this = this;

    _this.getNetList();
  }

  activeStep(status) {
    switch (status) {
      case null:
        return 0;
      case '1':
        return 1;
      case '2':
        return 3;
    }
  }

  componentWillUnmount() {
    this.isUnmounted = true;
  }

  render() {
    const _this = this;
    const {openSnackbar, message, net_repair_list} = _this.state;
    return (
      <div>
        <Header title="宽带报修详情"/>
        <Snackbar
          open={openSnackbar}
          message={<p>{message}</p>}
          autoHideDuration={4000}
          onRequestClose={_this.SnackbarRequestClose}
          bodyStyle={{backgroundColor: red500}}
        />
        <Wrapper>

          {
            net_repair_list.map(function (object, index) {
              return (
                <Card className="netlist_card">
                  <CardHeader
                    title={object.fault_type_title}
                    subtitle={<Time value={object.creation_time * 1000} format="报修时间: YYYY-MM-DD hh:mm:ss"/>}
                  />
                  <CardTitle title={object.account} subtitle={object.operator_title}/>
                  <Stepper activeStep={_this.activeStep(object.status)} orientation="vertical">
                    <Step>
                      <StepLabel>等待接单</StepLabel>
                      <StepContent active={object.status >= 1 ? true : false}>
                        <p>
                          维护员<strong>{object.admin_name}</strong>已接单<br/>
                          <strong>联系电话：</strong>{object.admin_mobile}
                        </p>
                      </StepContent>
                    </Step>
                    <Step>
                      <StepLabel>正在处理</StepLabel>
                    </Step>
                    <Step>
                      <StepLabel>处理完成</StepLabel>
                      <StepContent active={object.status >= 2 ? true : false}>
                        <p className={object.admin_comment ? '' : 'hide'}>
                          <strong>{object.admin_name}：</strong>{object.admin_comment}
                        </p>
                      </StepContent>
                    </Step>
                  </Stepper>
                  <CardActions>
                    <Link to={{ pathname: '/details', query: { id: object.id } }}><RaisedButton label="查看详情" backgroundColor="#F8F8F8"/></Link>
                    {
                      object.status==2 ?
                        <Link to={{ pathname: '/comment', query: { id: object.id } }}><RaisedButton label="评价" backgroundColor="#1AAD19" labelColor="#FFFFFF"/></Link>
                        :''
                    }
                  </CardActions>
                </Card>
              );
            })
          }
        </Wrapper>

      </div>
    );
  }
}
